<template>
  <div style="display:flex">
    <div style="with:200px;">
        <template>
            <i class="el-icon-menu"></i>
            <span>灾情防治</span>
            <el-tabs :tab-position="tabPosition" style="height: 600px;"  @tab-click="handleClick">
                <el-tab-pane label="区域一览">区域一览</el-tab-pane>
                <el-tab-pane label="小班管理">小班管理</el-tab-pane>
                <el-tab-pane label="事件记录">事件记录</el-tab-pane>
            </el-tabs>
        </template>
    </div>
    <div>
        
        <router-view>
            
        </router-view>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        tabPosition: 'left'
      };
    },
    
    methods: {
      handleClick(tab) {
        // console.log(tab);
        if (tab.index==0) {
            this.$router.push("/disaster/area")
        }
        if (tab.index==1) {
             this.$router.push("/disaster/classinfo")
        }
        if (tab.index==2) {
             this.$router.push("/disaster/event")
        }
      }
    }
  };
</script>

<style>

</style>